/**
 * All rights Reserved, Designed By 信鸥科技
 * project : projectweb
 * Created by youquer on 17/9/6.
 * 注意：本内容仅限于信鸥科技有限公司内部传阅，禁止外泄以及用于其他的商业目的
 * Description:
 *
 */

import React from 'react';
import { Link } from 'dva/router';
import { connect } from 'dva';
import PropTypes from 'prop-types';

import { Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber, Button, Radio, Row, Col, Switch, Icon } from 'antd';
const { TextArea } = Input;
import moment from 'moment';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
//自定义组件
import SmartTreeSelectInput from './SigleTreeSelect';
import SelectMoreTree from './SelectMoreTree';
import styles from './AddInput.less';

const AddInput = ({inputcolumns, type, dispatch, data, gutter}) => {

  /**
   * 数字输入框 Select
   * changeState: 改变model state的action方法
   * type: model的namespace
   *
   * */
  function onChange(item, e){
    if (item.type == "Switch"){
      e = e ?  1 : 0;
      if (e){
        e = 1;
      } else {
        e = 0;
      }
    }
    if (item.type == "InputNumber"){
      console.log(item.maxNum, item.minNum);
      if (e > item.maxNum || e < item.minNum){
        e = '';
      }
    }
    dispatch({
      type: type + '/changeState',
      key: item.key,
      value: e
    });

    if (item.callBack){
      dispatch({
        type: type + item.callBack,
        payload: e,
        key: item.key
      });
    }
  }

  /**
   * */
  //时间日期选择器
  function onChangePicker(key, date, dateString){
    dispatch({
      type: type + '/changeState',
      key: key,
      value: dateString
    })
  }

  //输入框
  /**
   * */
  function onChangeInput(key, e){
    dispatch({
      type: type + '/changeState',
      key: key,
      value: e.target.value
    })
  };

  /**
   * type:["input", SmartTreeSlectInput]
   * */
  var formItemArr = [];

  for (var i = 0 ; i < inputcolumns.length; i++){
    var item = inputcolumns[i];
    var itemsDiv = [];
    if (item instanceof Array){
      for (var j = 0; j < item.length; j++){
        itemsDiv.push(
          <Col key={"col-key-" + i + "-" + j} span={24 / item.length} >
            {formItem(item[j])}
          </Col>
        )
      }
      formItemArr.push(<Row key={"row-key-gutter-" + i} gutter={8}>
        {itemsDiv}
      </Row>);
    } else {
      formItemArr.push(formItem(item));
    }
  }

  function formItem(item){

    switch (item.type){
    /**
     * Input:
     * onChangeInput
     * */
      case "Input":

        if(item.disabled==undefined || item.disabled == false) {
          item.disabled = false;
        }else{
          item.disabled = true;
        }

        return(
          <FormItem
            className = {styles.formItem}
            key = {"FormItem-" + i + item.key}
            {...item.formItemLayout}
            label={item.title}
            validateStatus={item.validateStatus}
            hasFeedback= {item.hasFeedback}
            required= {item.required}
            help={item.help} >
            <Input type={item.inputType ? item.inputType : "text"} maxLength={item.max + ""} minLength={item.min + ""} value={data[item.key]} className={styles.formItemChild} onChange={onChangeInput.bind(this, item.key)} placeholder={item.placeholder} id={item.validateStatus} disabled={item.disabled}/>
          </FormItem>
        );
        break;
      case "SmartTreeSelectInput":
      function smartOnChange(key, e){
        dispatch({
          type: type + '/changeState',
          key: key,
          value: e
        });
        dispatch({
          type: type + '/singleTreeCallBack',
          payload: e,
          key: key
        });

        if (item.route != undefined && item.route != ""){
          dispatch({
            type: type + item.route,
            payload:{
              value:e
            }
          });
        }
      }
        /**
         * SmartTreeSelectInput:
         * onChangeInput
         * */
        var treeDate = item.smart;
        var values= data[item.key];
        var keyItem = item.key;
        var routeItem = item.route;


        var param = {treeDate, values, dispatch, keyItem, type, routeItem};
        return(
          <FormItem
            className = {styles.formItem}
            key = {"FormItem-" + i + item.key}
            {...item.formItemLayout}
            label={item.title}
            validateStatus={item.validateStatus}
            hasFeedback= {item.hasFeedback}
            required= {item.required}
            help={item.help} >
            <SmartTreeSelectInput value={data[item.key]} className={styles.formItemChild} {...param} />
          </FormItem>
        );
        break;

      case "SelectMoreTree":
        var treeDates = item.smart;
        var value= data[item.key];
        var keyItems = item.key;
        var routeItems = item.route;
        var callBack;
        if (item.callBack){
          callBack = item.callBack;
        }
        var params = {treeDates, value, dispatch, keyItems, type, routeItems, callBack};

        return(
          <FormItem
            className = {styles.formItem}
            key = {"FormItem-" + i + item.key}
            {...item.formItemLayout}
            label={item.title}
            validateStatus={item.validateStatus}
            hasFeedback= {item.hasFeedback}
            required= {item.required}
            help={item.help} >
            <SelectMoreTree placeholder={item.placeholder} value={data[item.key]} className={styles.formItemChild}  {...params} />
          </FormItem>
        );
        break;

      case "DatePicker":
        /**
         * DatePicker:
         * onChangePicker
         * */

        var date = "";
        var disable = item.disable;
        if (disable == undefined || disable == ""){
          disable = false;
        }

        if (data[item.key] == "" || data[item.key] == undefined){
          date = undefined;
        }else {
          date = moment(data[item.key], "YYYY-MM-DD");
        }

        return(
          <FormItem
            className = {styles.formItem}
            key = {"FormItem-" + i + item.key}
            {...item.formItemLayout}
            label={item.title}
            validateStatus={item.validateStatus}
            hasFeedback= {item.hasFeedback}
            required= {item.required}
            help={item.help} >
            <DatePicker value={date} className={styles.formItemChild} onChange={onChangePicker.bind(this, item.key)} style={{ width: '100%' }} disabled = {disable}/>
          </FormItem>
        );
        break;

      case "TimePicker":
        /**
         * TimePicker:
         * onChangePicker
         * */
        return(
          <FormItem
            className = {styles.formItem}
            key = {"FormItem-" + i + item.key}
            {...item.formItemLayout}
            label={item.title}
            validateStatus={item.validateStatus}
            hasFeedback= {item.hasFeedback}
            required= {item.required}
            help={item.help} >
            <TimePicker value={moment(data[item.key], "HH:mm:ss")} className={styles.formItemChild} onChange={onChangePicker.bind(this, item.key)} className={styles.full_width} />
          </FormItem>
        );
        break;
      case "Select":
        /**
         * Select:
         * onChangePicker
         * */
        var options = [];
        if (item.optionKey){
          for (var j = 0; j < item.optionKey.length; j++){
            var option = item.optionKey[j];
            options.push(
              <Option key = {"option-" + j} value={option.value}>{option.key}</Option>
            )
          }
        }
        return(
          <FormItem
            className = {styles.formItem}
            key = {"FormItem-" + i + item.key}
            {...item.formItemLayout}
            label={item.title}
            validateStatus={item.validateStatus}
            hasFeedback= {item.hasFeedback}
            required= {item.required}
            help={item.help} >
            <Select value={data[item.key]} className={styles.full_width} onChange={onChange.bind(this, item)} defaultValue="1">
              {options}
            </Select>
          </FormItem>
        );
        break;

      case "InputNumber":
        /**
         * InputNumber:
         * onChangeNumInput
         * */
        return(
          <FormItem
            className = {styles.formItem}
            key = {"FormItem-" + i + item.key}
            {...item.formItemLayout}
            label={item.title}
            validateStatus={item.validateStatus}
            hasFeedback= {item.hasFeedback}
            required= {item.required}
            help={item.help} >
            <InputNumber value={data[item.key]} className={styles.full_width} onChange={onChange.bind(this, item)} minLength = {item.min + ""} maxLength = {item.max + ""} placeholder={item.placeholder}/>
          </FormItem>
        );
        break;

      case "TextArea":
        return(
          <FormItem
            className = {styles.formItem}
            key = {"FormItem-" + i + item.key}
            {...item.formItemLayout}
            label={item.title}
            validateStatus={item.validateStatus}
            hasFeedback= {item.hasFeedback}
            required= {item.required}
            help={item.help} >
            <TextArea maxLength={item.max + ""} minLength={item.min + ""} autosize={item.autosize} rows={4} value={data[item.key]} className={styles.formItemChild} onChange={onChangeInput.bind(this, item.key)} placeholder={item.placeholder} id={item.validateStatus} />
          </FormItem>
        );
        break;
      case "Switch":
        /**
         * checkedChildren: 开字段,
         * unCheckedChildren: 关字段,
         * value: 值,
         * defaultChecked: 默认开关状态
         * onChange: 值改变事件
         * */
        var checked = 0;
        if (data[item.key]){
          checked = true
        } else {
          checked = false
        }
        return (
          <FormItem
            className = {styles.formItem}
            key = {"FormItem-" + i + item.key}
            {...item.formItemLayout}
            label={item.title}
            validateStatus={item.validateStatus}
            hasFeedback= {item.hasFeedback}
            required= {item.required}
            help={item.help} >
            <Switch checked={checked} onChange={onChange.bind(this, item)} checkedChildren={item.checkedChildren} unCheckedChildren={item.unCheckedChildren} />
          </FormItem>
        );
        break;
      case "Upload":
        /**
         * InputNumber:
         * onChangeNumInput
         * */
        return(
          <FormItem
            className = {styles.formItem + item.key}
            key = {"FormItem-" + i}
            {...item.formItemLayout}
            label={item.title}
            //validateStatus={item.validateStatus}
            //hasFeedback= {item.hasFeedback}
            required= {item.required}
            extra={item.help} >
            <Upload {...props} name="logo" action="/upload.do" listType="picture">
              <Button>
                <Icon type="upload" />上传图片
              </Button>
            </Upload>
          </FormItem>
        );
        break;
      default:
        break;
    }
  }
  return (
    <Form>
      {formItemArr}
    </Form>
  )
};

export default connect()(AddInput);
